<template>
	<view class="content">
		<view>
			<view style="width: 100%;height: 60rpx;background-color: #B0e3ff;"></view>
			<view class="navBar">
				<view class="left"></view>
				<view class="center">
					<view v-for="(item,index) in top_tab" :key='index' :id="index" class="uni-tab-item"
						@click="tabTap">
						<text class="uni-tab-item-title"
							:class="toptab==index ? 'uni-tab-item-title-active' : ''">{{item}}</text>
					</view>
				</view>
				<view class="right">
					<uni-icons class="right-icon" type="search" size="28" color="#fff"></uni-icons>
					<uni-icons class="right-icon" type="email" size="28" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		
		
		<!-- <view style="width: 100%;height: 90rpx;"></view> -->
		<view class="interest" v-if="toptab == 0">
			<view class="interest-card" v-for="(item,index) in act">
				<image :src="item.acturl"></image>
				<view class="text">
					<view class="int-card-text">
						<view class="name"><text>{{item.actname}}</text></view>
						<view><text>{{item.acttime}}</text></view>
						<view><text>{{item.actplace}}</text></view>
					</view>
					<view class="int-card-label">
						<view class="label" v-for=" item in label">{{item}}</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="recommend" v-if="toptab == 1">
			<!-- 轮播图 -->
			<view class="swiper-block">
				<view class="swiper-box">
					<swiper indicator-dots="true" autoplay="true" interval="4000" duration="1000">
						<swiper-item v-for="(img,index) in swiperimgs" :key="index">
							<image :src="img.caroImg" mode="aspectFill" class="swiper-item"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="swiper-radius"></view>
			</view>
			<view><text class="title">综合推荐</text></view>
			<view class="comprehensive">
				<view class="comprehensive-recommended" v-for="(item,index) in act" :key="item.id">
					<image :src="item.acturl"></image>
					<text>{{item.actname}}</text>
				</view>
			</view>
			<view><text class="title">离我最近</text></view>
			<view class="closest">
				<view class="my-closest" v-for="(item,index) in nearestAct" :key="item.id" @tap="jumpToActDetail(item)">
					<image :src="item.actCoverImg"></image>
					<text>{{item.actName}}</text>
				</view>
			</view>
			<view><text class="title">兴趣标签</text></view>
			<view class="interest-time">
				<view class="interest-label" style="background-color: #EC808D;">
					<text class="interest-name">油画</text>
					<view class="body-int-lab">
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
					</view>
				</view>
				<view class="interest-label" style="background-color: #70B603;">
					<text class="interest-name">音乐剧</text>
					<view class="body-int-lab">
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
					</view>
				</view>
				<view class="interest-label" style="background-color: #F59A23;">
					<text class="interest-name">摄影</text>
					<view class="body-int-lab">
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
					</view>
				</view>
			</view>
			<view><text class="title">好友喜欢</text></view>
			<view class="closest">
				<view class="my-closest" v-for="(item,index) in act" :key="item.id">
					<image :src="item.acturl"></image>
					<text>{{item.actname}}</text>
				</view>
			</view>
			<view><text class="title">最近时间</text></view>
			<view class="interest-time">
				<view class="interest-label" style="background-color: #EC808D;">
					<text class="interest-name">今天</text>
					<view class="body-int-lab">
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
					</view>
				</view>
				<view class="interest-label" style="background-color: #70B603;">
					<text class="interest-name">明天</text>
					<view class="body-int-lab">
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
					</view>
				</view>
				<view class="interest-label" style="background-color: #F59A23;">
					<text class="interest-name">两天后</text>
					<view class="body-int-lab">
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
						<view class="each-one">
							<view class="act-img"><image src="../../static/swiper/1.jpg"></image></view>
							<view class="act-name"><text>枕头大战</text></view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	    
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top_tab:["兴趣","推荐"],
				toptab:1,
				tabIndex:0,
				swiperimgs: [],
				nearestAct: [],
				act:[
					{
						id:1,
						acturl:"../../static/swiper/1.jpg",
						actname:"灵感事务所",
						acttime:"2020.09.30-2020.12.31",
						actplace:"杭州  |  杭州天地二层L201"
					},
					{
						id:2,
						acturl:"../../static/swiper/2.jpg",
						actname:"灵感事务所",
						acttime:"2020.09.30-2020.12.31",
						actplace:"杭州  |  杭州天地二层L201"
					},
					{
						id:3,
						acturl:"../../static/swiper/3.jpg",
						actname:"灵感事务所",
						acttime:"2020.09.30-2020.12.31",
						actplace:"杭州  |  杭州天地二层L201"
					},
					{
						id:4,
						acturl:"../../static/swiper/4.jpg",
						actname:"灵感事务所",
						acttime:"2020.09.30-2020.12.31",
						actplace:"杭州  |  杭州天地二层L201"
					}
				],
				label:["娱乐","美国","流行"]
			}
		},
		
		onLoad() {
		},
		created() {
			this.getCaro();
			this.getNearest();
		},
		methods: {
			tabTap(e) {
				console.log(e.currentTarget.id)
				this.toptab = e.currentTarget.id
			},
			//跳转到活动详情界面
						jumpToActDetail(act) {
							let obj = {
								actId: act.actId,
							}
							var naviData = JSON.stringify(obj);
							uni.navigateTo({
								// url: '/pages/activities/activity'
								// 	+ '?'
								// 	+ 'actId=' + act.actId,
								url: '/pages/activities/activity'
									+ '?'
									+ 'naviData=' + naviData,
							})
						},
						//获取经纬度
						getLocation() {
							let that = this;
							return new Promise((resolve, reject) => {
								uni.getLocation({
									type: 'wgs84',
									geocode: true,
									success: (res) => {
										console.log('获取经纬度成功', res);
										this.latitude = res.latitude,
										this.longitude = res.longitude
										resolve('suc');
									},
									fail: () => {
										console.log('获取经纬度失败');
										this.latitude = 0,
										this.longitude = 0
										reject('err');
									}
								});
							})
						},
						//获取离我最近
						// getNearest(longitude, latitude) {
						async getNearest() {
							await this.getLocation();
							uni.request({
							    url: 'http://ronin.fun:8888/fp/rec/nearest',
								data: {
									longitude: this.longitude,
									latitude: this.latitude,
								},
							    success: (res) => {
									this.nearestAct = res.data.data;
									console.log(res.data);
							    }
							});
						},
						//获取轮播图
						getCaro() {
							uni.request({
							    url: 'http://ronin.fun:8888/fp/rec/caro',
							    success: (res) => {
									this.swiperimgs = res.data.data;
									console.log(res.data);
							    }
							});
						},
						tabTap(e) {
							console.log(e.currentTarget.id)
							this.toptab = e.currentTarget.id
						}
		},
		components:{
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		// 导航栏
		.nav-top{
			width: 100%;
			height: 120rpx;
			background-color: #B0E3FF;
			position: fixed;
			z-index: 1000;
			top: 0;
		}
		.navBar{
			width: 100%;
			height: 90rpx;
			display: flex;
			background-color: #B0E3FF;
			// position: fixed;
			// z-index: 1000;
			.left{
				display: inline-block;
				height: 100%;
				width: 200rpx;
			}
			.center{
				display: inline-block;
				height: 100%;
				flex: 1;
				text-align: center;
				.uni-tab-item {
					display: inline-block;
					flex-wrap: nowrap;
					padding-left: 15rpx;
					padding-right: 15rpx;
				}
				.uni-tab-item-title {
					color: #FFFFFF;
					font-size: 35rpx;
					height: 80rpx;
					line-height: 90rpx;
					flex-wrap: nowrap;
					/* #ifndef APP-PLUS */
					white-space: nowrap;
					/* #endif */
				
				}
				.uni-tab-item-title-active {
					color: #FFFFFF;
					font-weight: bold;
					font-size: 35rpx;
					line-height: 90rpx;
					// border-bottom: solid #797979;
				}
			}
			.right{
				display: inline-block;
				height: 100%;
				width: 200rpx;
				margin-top: 15rpx;
				.right-icon{
					
					margin-left: 20rpx;
				}
			}
			
		}
		
		// 首页推荐
		// 轮播图
		.swiper-block{
			width: 100%;
			height: 370rpx;
			background-color: #B0E3FF;
			.swiper-box {
				height: 300rpx;
				align-items: center;
				width: 90%;
				margin-left: auto;
				margin-right: auto;
				// margin-top: 20rpx;
				box-shadow: 2px 2px 10px rgba(134,134,134,0.6);
				border-style: none;
				border-radius: 20rpx;
				.swiper-item {
					display: block;
					height: 300rpx;
					width: 100%;
					margin-left: auto;
					margin-right: auto;
					border-style: none;
					border-radius: 20rpx;
				}
			}
			.swiper-radius{
				height: 40rpx;
				border-radius: 30rpx 30rpx 0 0;
				background-color: #fff;
				margin-top: 35rpx;
			}
		}
		// 标题
		.title{
			color: #333333;
			font-weight: bold;
			margin-left: 50rpx;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			font-size: 35rpx;
		}
		// 综合推荐
		.comprehensive{
		        display:flex;
		        width:100%;
		        height: 320rpx;
		        flex-direction: row;
		        overflow-x: scroll;
		        overflow-y: hidden;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				
				.comprehensive-recommended{
				        width: 340rpx;
				        height: 300rpx;
				        border-radius: 20rpx;
				        background-color: white;
				        border: 1rpx;
				        display: inline-block;
				        text-align: center;
				        margin-left: 40rpx;
						margin-right: 10rpx;
						box-shadow: 0px 2px 1px rgba(200,200,200,.30);
						image{
							width: 340rpx;
							height: 240rpx;
							border-radius: 20rpx;
						}
						text{
							color:#555555;
							font-weight: bold;
							margin-top: 5rpx;
							margin-bottom: 0rpx;
						}
				    }
		    }
		.comprehensive::-webkit-scrollbar {
		        display: none;
		    }
		
		// 离我最近  好友喜欢
		.closest{
		        display:flex;
		        width:100%;
		        height: 270rpx;
		        flex-direction: row;
		        overflow-x: scroll;
				overflow-y: hidden;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				
				.my-closest{
				        width: 250rpx;
				        height: 250rpx;
				        border-radius: 20rpx;
				        background-color: white;
				        border: 1px;
				        display: inline-block;
				        text-align: center;
				        margin-left: 40rpx;
						margin-right: 10rpx;
						box-shadow: 0px 2px 1px rgba(200,200,200,.30);
						image{
							width: 250rpx;
							height: 200rpx;
							border-radius: 20rpx;
						}
						text{
							color:#555555;
							font-weight: bold;
							// margin-top: 5rpx;
							// line-height: 50rpx;
							margin-bottom: 5rpx;
							font-size: 30rpx;
						}
				    }
		    }
		.closest::-webkit-scrollbar {
		        display: none;
		    }
		// 兴趣标签  最近时间
		.interest-time{
		        display:flex;
		        width:100%;
		        height: 540rpx;
		        flex-direction: row;
		        overflow-x: auto;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				opacity: 80%;
				.interest-label{
				        width: 320rpx;
				        height: 520rpx;
				        border-radius: 20rpx;
				        border-top-left-radius: 20rpx;
				        border-top-right-radius: 20rpx;
				        display: inline-block;
				        margin-left: 40rpx;
						margin-right: 10rpx;
						box-shadow: 0px 2px 1px rgba(200,200,200,.30);
						.interest-name{
							color: white;
							font-size: 50rpx;
							line-height: 80rpx;
							font-weight: bold;
							margin-left: 30rpx;
						}
						.body-int-lab::-webkit-scrollbar {
		                    display: none;
		                }
						.body-int-lab{
						        width: 320rpx;
						        height: 420rpx;
						        border-radius: 20rpx;
						        bottom: 0;
						        background-color: white;
						        padding-top: 20rpx;
								display:flex;
								flex-direction: column;
								overflow-y: auto;
								box-shadow: 0px 2px 1px rgba(200,200,200,.30);
								.each-one{
								        width: 320rpx;
								        height: 180rpx;
								        margin-top: 20rpx;
										margin-bottom: 20rpx;
										.act-img{
										        display: inline-block;
										        margin-bottom: 10rpx;
										        width: 140rpx;
										        height: 140rpx;
										        border-radius: 20rpx;
										        padding-left: 10rpx;
												image{
													width: 140rpx;
													height: 140rpx;
													border-radius: 20rpx;
												}
										    }
										.act-name{
											display: inline-block;
											vertical-align: top;
										    color:#555555;
										    font-weight: bold;
										    margin-top: 10rpx;
										    margin-left: 10rpx;
										    }
								    }
						    }
				    }
		    }
		.interest-time::-webkit-scrollbar {
		    display: none;
            }
	}
	
	
		// 首页兴趣
		.interest-card{
			margin: 20rpx 30rpx 20rpx 30rpx;
			height: 550rpx;
			border-radius: 20rpx;
			box-shadow: 0px 2px 1px rgba(200,200,200,.30);
			image{
				margin: 10rpx 20rpx 10rpx 20rpx;
				height: 400rpx;
				border-radius: 20rpx;
			}
			.text{
				display: flex;
				.int-card-text{
					display: inline-block;
					text-align: center;
					color: #797979;
					font-size: 20rpx;
					flex: 1;
					.name{
						text-align: center;
						color: #333333;
						font-weight: bold;
						font-size: 30rpx;
					}
				}
				.int-card-label{
					display: inline-block;
					vertical-align: middle;
					flex: 1;
					.label{
						width: 100rpx;
						height: 40rpx;
						display: inline-block;
						border: 1px solid #B0E3FF;
						color: #B0E3FF;
						border-radius: 20rpx;
						text-align: center;
					}
				}
			}
			
		}
	
</style>
